<!--

  品牌管理模块
  品牌管理模块
  品牌管理模块

-->

<template>
  <div class="app-waper">
    <div id="app">
      <div id="top">
        <i class="el-icon-search"></i><span>筛选查询</span>
        <!--根据输入字段模糊查询-->
        <div class="like">
          <span>模糊条件</span>
          <el-input class="likequery" placeholder="请输入品牌名称或名称缩写查询" v-model="input" clearable></el-input>
          <el-button type="primary" @click="queryByLike()">查询</el-button>
        </div>
      </div>
      <div id="table">
        <!--操作 : 新增,修改,删除-->
        <div id="right-waper">
          <i class="el-icon-menu" style="color: #409EFF"></i><span>数据列表</span>
          <div id="right">
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
            <el-button type="primary" @click="update=true">修改</el-button>
            <el-button type="primary" @click="deleteBrand()" :disabled="checkArrayObj.length<=0">删除</el-button>
          </div>
        </div>
        <!--表格-->
        <template>
          <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIndex">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="brandId" label="编号" ></el-table-column>
            <el-table-column prop="brandName" label="品牌名称"></el-table-column>
            <el-table-column prop="brandFirst" label="品牌首字母"></el-table-column>
            <el-table-column prop="brandBigClass" label="品牌大类"></el-table-column>
            <el-table-column prop="brandDes" label="类别名称"></el-table-column>
          </el-table>
        </template>

        <!--分页-->
        <el-pagination background layout="prev, pager, next" page-size="5" :total=total
                       @prev-click="lastPage()" @next-click="nextPage()" @current-change="currentChange">
        </el-pagination>

        <!--1. 新增品牌模态-->
        <el-dialog title="新增品牌信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="brand">
              <!--品牌名称-->
              <el-form-item label="品牌名称" :label-width="formLabelWidth">
                <el-input v-model="brand.brandName" autocomplete="off"></el-input>
              </el-form-item>
              <!--品牌首字母-->
              <el-form-item label="品牌首字母" :label-width="formLabelWidth">
                <el-input v-model="brand.brandFirst" autocomplete="off"></el-input>
              </el-form-item>
              <!--品牌大类-->
              <el-form-item label="品牌大类" :label-width="formLabelWidth">
                <el-input v-model="brand.brandBigClass" autocomplete="off"></el-input>
              </el-form-item>
              <!--类别代号-->
              <el-form-item label="类别名称" :label-width="formLabelWidth">
                <el-input v-model="brand.brandDes" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <!--提交按钮-->
              <el-button type="primary" @click="insertBrand()">确 定</el-button>
            </div>
          </el-dialog>
        <!--2. 修改品牌信息模态框-->
        <el-dialog title="修改品牌信息" :visible.sync="update" width="30%">
          <el-form :model="brand">
            <!--品牌名称-->
            <el-form-item label="品牌名称" :label-width="formLabelWidth">
              <el-input v-model="brand.brandName" autocomplete="off"></el-input>
            </el-form-item>
            <!--品牌首字母-->
            <el-form-item label="品牌首字母" :label-width="formLabelWidth">
              <el-input v-model="brand.brandFirst" autocomplete="off"></el-input>
            </el-form-item>
            <!--品牌大类-->
            <el-form-item label="品牌大类" :label-width="formLabelWidth">
              <el-input v-model="brand.brandBigClass" autocomplete="off"></el-input>
            </el-form-item>
            <!--类别代号-->
            <el-form-item label="类别名称" :label-width="formLabelWidth">
              <el-input v-model="brand.brandDes" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!--提交按钮-->
            <el-button type="primary" @click="updateBrand()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name:"index",

    /*======================================================相当于data*/
    data(){
      return{
        /*新增品牌*/
        brand: {
          brandId:0,
          brandName:"",
          brandFirst:"",
          brandDes:"",
          brandBigClass:0,


          classNum:null,
          delivery: false,
          type: [],
        },
        dialogTableVisible: false,
        dialogFormVisible: false,
        update: false,
        formLabelWidth: '100px',
        value: '',
        /*输入字段模糊查询*/
        input: '',
        /*1. 后端发过来的查询到的表格的所有的数据(表格数据)*/
        tableData:[],
        /*2. 上一页下一页的index*/
        pageIndex:1,
        /*分页:后端传递的所有数据记录*/
        total:null,
        /*更新*/

        /*数组保存触发复选框后的一些数据*/
        checkArrayObj:[],
      }
    },
    /*===========================================================方法区*/
    methods:{
      //下一页
      nextPage: function () {
        let $this = this;
        let $nextPageIndex = ++$this.pageIndex;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":$nextPageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //上一页
      lastPage: function () {
        let $this = this;
        let $prevPageIndex = --$this.pageIndex;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":$prevPageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //当前页
      currentChange:function(PageIndex){
        let $this = this;
        request.post("http://192.168.40.7:8080/brand/findAll",{
          "pageIndex":PageIndex
        }).then(function (data) {
          $this.tableData = data.data.list;
        })
      },
      //模糊查询
      queryByLike: function () {
        let $this = this;
        request.post("http://192.168.40.7:8080/brand/queryByLike",{
          "inputString":$this.input,
        })
          .then(function (data) {
            //$this.tableData = data.data;
            $this.tableData = data.data.list
          })
      },
      //新增
      insertBrand:function () {
        let $this = this;
        request.post("http://192.168.40.7:8080/brand/insertBrand",{
          "brandPo":$this.brand
        }).then(function (data) {
          console.log(data);
          /*执行成功后关闭模态框*/
        })
      },

      //复选框触发后的数据
      checkIndex:function(objcet){ //object代表的是当前行的所有数据
        let $this = this;
        $this.checkArrayObj = objcet;
        console.log($this.checkArrayObj[0].brandName);
        //将值赋值到brand中去,然后选一些数据渲染到模态框中去
        $this.brand.brandId = $this.checkArrayObj[0].brandId;
        $this.brand.brandBigClass = $this.checkArrayObj[0].brandBigClass;
        $this.brand.brandFirst = $this.checkArrayObj[0].brandFirst;
        $this.brand.brandDes = $this.checkArrayObj[0].brandDes;
        $this.brand.brandName = $this.checkArrayObj[0].brandName;
      },
      //修改
      updateBrand: function () {
        let $this = this;
        //将brand中的数据发送到后端
        request.post("http://192.168.40.7:8080/brand/updateBrand",{brandPo:$this.brand})
      },
      //批量删除
      deleteBrand:function () {

         let $this = this;
         console.log("删除");
         let chs = $this.checkArrayObj; //获取到的是选中框的索引 根据用户操作顺序不同可能出现 [0,2,1] [2,0,1] [1,0,2] 所以删除之前应该先排序
         let listnum=[];
         for(let i=0;i<chs.length;i++){
           listnum.push(chs[i].brandId);
         }
        listnum= listnum.sort(function(a,b){return a-b});

         //后端删除
        //将listnum保存的值发送到后端,保存的是每行数据的brandId,后端根据id删除
        request.post("http://192.168.40.7:8080/brand/deletBrand",{
          list:listnum
        })

        //前端删除
         for (let i = listnum.length-1; i >=0 ; i--) {
           this.tableData.splice(listnum[i],1);
         }
         $this.checkArrayObj.length = 0;
      }
    },

    /*==========================================生命周期*/
    mounted(){
      let $this=this;
      request.post("http://192.168.40.7:8080/brand/findAll",{
        pageIndex:$this.pageIndex
      }).then(function (data) { //成功
        //将数据填充到表格中
        $this.tableData = data.data.list;
        //将数据的条数记录到total中
        $this.total=data.data.total
      })
    }

  }
</script>

<style scoped>
  .el-icon-menu{
    font-size: 40px;
  }
  .like{
    display: inline-block;
    position: relative;
    left: 47%;
  }
  .app-waper{
    /*background-color: rgba(242, 242, 242, 1);;*/
  }
  #app{
    /*width: 80%;*/
    /*height: 600px;*/
    /*background-color: skyblue;*/
    /*margin-left: 20%;*/
    margin: 2%;
  }
  #top{
    margin-bottom: 5px;
    height: 40px;
    /*background-color: rgba(204, 204, 204, 1);;*/
  }
  #top>span{
    position: relative;
    left: 20px;
  }
  #top>.el-icon-search{
    margin-left: 10px;
    font-weight: bold;
  }
  /*!*下拉菜单样式*!*/
  /*.el-dropdown-link {*/
  /*  cursor: pointer;*/
  /*  !*color: #409EFF;*!*/
  /*  width: 60px!important;*/
  /*  height: 30px!important;*/
  /*}*/
  /*模糊查询*/
  .likequery{
    display: inline-block;
    width: 400px;
  }
  #right-waper{
    /*background-color: rgba(204, 204, 204, 1);*/
    width: 100%;
    height: 42px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
  }
  #right-waper>span{
    position: relative;
    top: -9px;
    left: 20px;
  }
  #right{
    float: right;
    margin-right: 20px;
  }
  #right .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .like .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .app-waper{
    padding:8px;
    overflow: hidden;
  }
</style>











